"use client";

import React, { useEffect, useState } from 'react';
import Image from 'next/image';

const Platforms: React.FC = () => {
  const platforms = [
    { id: 1, name: 'YouTube', star: '/images/pink-star.png' },
    { id: 2, name: 'Instagram', star: '/images/purple-star.png' },
    { id: 3, name: 'Facebook', star: '/images/green-star.png' },
    { id: 4, name: 'TikTok', star: '/images/pink-star.png' },
  ];

  // 使用客户端渲染来避免SSR hydration错误
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // 定义内容
  const content = (
    <div className="mx-auto px-[120px]">
      <div className="flex justify-center mb-10">
        <h2 className="font-outfit text-[48px] font-semibold leading-normal text-center flex items-center text-[#4E5469]">
          Compatible with these platforms
        </h2>
      </div>
      
      <div className="flex justify-center space-x-4 mb-16">
        <Image src="/images/pink-star.png" alt="Pink Star" width={32} height={32} />
        <Image src="/images/pink-star.png" alt="Pink Star" width={32} height={32} />
        <Image src="/images/pink-star.png" alt="Pink Star" width={32} height={32} />
      </div>

      <div className="flex justify-center gap-6 max-w-4xl mx-auto">
        {platforms.map(platform => (
          <div 
            key={platform.id} 
            className="w-[101px] h-[45px] flex items-center justify-center bg-[#D9D9D9]"
          >
          </div>
        ))}
      </div>
    </div>
  );

  // 使用客户端渲染
  return (
    <section className="py-20 bg-[#F8F8F8]">
      {isMounted ? content : 
        <div className="mx-auto px-[120px] min-h-[200px] flex items-center justify-center">
          <div className="text-center text-gray-400">Loading...</div>
        </div>
      }
    </section>
  );
};

export default Platforms; 